<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张佳文</title>
    <link rel="stylesheet" href="resources/css/bootstrap.css">
    <script src="resources/js/jq.js"></script>
    <script src="resources/js/vue.js"></script>
    <style>
        * {
            user-select: none;
        }

        .column-start-start {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .column-center-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .column-between-start {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .column-between-center {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .column-start-center {
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .row-start-center {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

        .row-start-start {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .row-around-center {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .row-center-center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .row-between-center {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .bggreen {
            background: green;
        }

        .bgblue {
            background: blue;
        }

        .bgyellor {
            background: yellow;
        }

        .bgorange {
            background: orange;
        }

        .bgred {
            background: red;
        }

        .bgwhite {
            background: white;
        }

        /*---滚动条默认显示样式--*/
        ::-webkit-scrollbar-thumb {
            background-color: gainsboro;
            height: 50px;
            outline-offset: -2px;
            outline: 2px solid rgba(255, 255, 255, 0);
            border-radius: 4px;
        }

        /*---鼠标点击滚动条显示样式--*/
        ::-webkit-scrollbar-thumb:hover {
            background-color: gray;
            height: 50px;
        }

        /*---滚动条大小--*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*---滚动框背景样式--*/
        ::-webkit-scrollbar-track-piece {
            background-color: rgba(255, 255, 255, 0);
        }

        html {
            height: 100%;
        }

        .chaozuolist:hover {
            background: rgb(243, 199, 119);
        }

        .projectlist:hover {
            background: gray;
            color: white;
        }
    </style>
</head>

<body style="height: 100%;">
    <div id="app" style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;position: relative;height: 100%;">
        <div class="" style="position: absolute; top: 20px;bottom: 20px; left: 20px;right: 320px;">
            <div class="row-start-center" style="font-size: 25px;">项目列表
                <svg style="margin-left: 10px;cursor: pointer;" onclick="reflushProjectList()" t="1595644993967"
                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25348"
                    width="25" height="25">
                    <path
                        d="M951.84384 772.835328 858.964992 635.465728c-3.65568-5.244928-11.283456-9.217024-20.578304-10.646528-9.218048-1.350656-19.068928 0-26.377216 3.8144L622.756864 725.722112c-8.582144 4.369408-12.314624 11.121664-9.852928 17.79712 2.622464 6.592512 11.123712 11.838464 21.92896 13.425664l49.975296 7.469056c-49.657856 58.3168-115.441664 93.751296-179.639296 93.751296-125.056 0-264.572928-137.21088-264.572928-333.852672 0-23.199744-31.14496-42.1888-69.599232-42.1888s-69.599232 18.989056-69.599232 42.1888c0 234.381312 177.334272 418.071552 403.770368 418.071552 127.916032 0 242.802688-57.759744 317.723648-157.154304l95.818752 14.45888c2.461696 0.319488 4.845568 0.477184 7.230464 0.477184 0.157696 0 0.157696 0 0.397312 0 16.446464 0 29.794304-8.024064 29.794304-17.954816C956.132352 778.714112 954.543104 775.616512 951.84384 772.835328L951.84384 772.835328zM185.933824 392.105984c-9.295872-1.429504-17.002496-5.243904-20.578304-10.645504L70.729728 241.70496c-4.289536-6.27712-2.224128-13.666304 5.08416-18.671616 7.310336-5.243904 18.910208-7.38816 29.715456-5.799936l95.8976 14.459904c74.923008-99.233792 189.80864-157.233152 317.725696-157.233152 226.435072 0 403.769344 183.770112 403.769344 418.151424 0 23.358464-31.143936 42.1888-69.600256 42.1888-38.453248 0-69.598208-18.830336-69.598208-42.1888 0-196.641792-139.437056-333.853696-264.57088-333.853696-64.196608 0-129.983488 35.434496-179.64032 93.75232l49.975296 7.469056c10.884096 1.826816 19.306496 6.832128 21.927936 13.426688 2.542592 6.674432-1.271808 13.66528-9.85088 18.034688l-189.33248 97.010688c-5.402624 2.78016-12.235776 4.13184-19.147776 4.13184C190.621696 392.583168 188.237824 392.423424 185.933824 392.105984z"
                        p-id="25349" fill="#bfbfbf"></path>
                </svg>
            </div>
            <div class=" w-100 column-start-start"
                style="position: absolute;left: 0;top: 61px;bottom: 0;width: 100%;overflow-y: scroll;">
                <div @click="openProjet(item)" v-for="item in projetlist" class="w-100  row-start-center projectlist"
                    style="min-height: 40px;height: 40px;">
                    <div style="width: 10px;"></div>
                    <svg t="1595638625295" class="icon" viewBox="0 0 1059 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="17767" width="20" height="20">
                        <path
                            d="M387.001379 58.932966c25.494069 0 48.622345 21.186207 48.622345 49.434482v324.890483c0 25.917793-20.833103 49.434483-48.587034 49.434483H65.430069c-25.423448 0-48.587034-21.186207-48.587035-49.434483v-324.855172c0-25.917793 20.833103-49.469793 48.587035-49.469793h321.606621z m490.531311 526.053517c25.458759 0 48.587034 21.186207 48.587034 49.434483v324.925793c0 25.882483-20.833103 49.434483-48.587034 49.434482H558.256552c-25.458759 0-48.587034-21.186207-48.587035-49.434482v-324.925793c0-25.882483 20.833103-49.434483 48.587035-49.434483h319.276138z m-490.496 0c25.423448 0 48.587034 21.186207 48.587034 49.434483v324.925793c0 25.882483-20.833103 49.434483-48.587034 49.434482H65.430069c-25.423448 0-48.587034-21.186207-48.587035-49.434482v-324.925793c0-25.882483 20.833103-49.434483 48.587035-49.434483h321.606621z"
                            fill="#5C6086" p-id="17768"></path>
                        <path
                            d="M1020.998621 148.409379l-263.768276-141.241379c-23.128276-14.124138-97.174069-4.731586-108.755862 21.186207l-122.632828 308.400552c-11.546483 23.51669-4.590345 54.130759 20.833104 68.254896l249.89131 145.972966c57.838345 23.552 92.548414-2.365793 104.130207-25.882483l143.430621-277.821793c13.876966-25.882483 13.876966-80.048552-23.128276-98.868966z"
                            fill="#C4DFFB" p-id="17769"></path>
                        <path
                            d="M979.332414 162.533517L694.731034 9.498483c-23.092966-11.793655-53.177379-2.365793-64.759172 21.186207l-150.386759 289.544827c-11.581793 23.58731-2.330483 54.166069 20.833104 65.959724l284.601379 153.035035c23.128276 11.758345 53.177379 2.330483 64.759173-21.186207l150.422069-289.580138c11.546483-23.552 2.295172-51.800276-20.833104-65.924414z"
                            fill="#0AC199" p-id="17770"></path>
                    </svg>
                    <span style="margin-left: 10px;">{{item}}</span>
                </div>
            </div>
        </div>
        <div class="column-start-start" class="bg-dark"
            style="position: absolute; top: 20px;bottom: 20px;right: 20px;width: 280px;">
            <span style="font-size: 25px;margin-bottom: 25px;">选择一个操作</span>
            <div onclick="newProject()" class="w-100 row-start-center chaozuolist"
                style="height: 82px;min-height: 82px; border: 1px solid gainsboro;margin-bottom: 10px;">
                <div style="width: 10px;"></div>
                <svg t="1595638669817" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="17904" width="35" height="35">
                    <path
                        d="M680.594286 238.811429V0H208.091429A135.68 135.68 0 0 0 73.142857 136.411429v751.177142A135.68 135.68 0 0 0 208.091429 1024h607.817142A135.68 135.68 0 0 0 950.857143 887.588571V272.822857h-236.251429a34.011429 34.011429 0 0 1-34.011428-34.011428zM748.251429 512a34.011429 34.011429 0 0 1-33.645715 34.011429h-168.96v170.788571a33.645714 33.645714 0 1 1-67.291428 0v-170.788571H309.394286a34.011429 34.011429 0 0 1 0-68.022858h168.96V307.2a33.645714 33.645714 0 1 1 67.291428 0v170.788571h168.96a33.645714 33.645714 0 0 1 33.645715 34.011429z m0-512v204.8H950.857143z"
                        fill="#17abe3" p-id="17905"></path>
                </svg>
                <div style="width: 20px;"></div>
                <div style="width: 200px;height: 100%;overflow: hidden;">
                    <span style="font-size: 20px;font-weight: 700;">新建项目</span><br>
                    <span style="font-size: 13px;color: gray;">新建一个动画项目，储存格式为未编译的饥荒动画</span>
                </div>
            </div>
            <div onclick="importproject()" class="w-100 row-start-center chaozuolist"
                style="height: 82px;min-height: 82px; border: 1px solid gainsboro;margin-bottom: 10px;">
                <div style="width: 12px;"></div>
                <svg t="1595643882908" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="24331" width="30" height="35">
                    <path
                        d="M978.495504 166.340536A141.240558 141.240558 0 0 1 1021.037841 255.25402v638.13505a127.62701 127.62701 0 0 1-39.564374 93.593141 131.881244 131.881244 0 0 1-91.0406 37.011833H130.626734a127.62701 127.62701 0 0 1-93.593141-39.564373A131.881244 131.881244 0 0 1 0.02176 890.411107V130.604974A127.62701 127.62701 0 0 1 39.586133 37.011833 131.881244 131.881244 0 0 1 130.626734 0H382.90279a131.030397 131.030397 0 0 1 53.177921 14.464394 127.62701 127.62701 0 0 1 42.542337 33.608446l42.542336 48.498264a85.084673 85.084673 0 0 0 22.122016 25.099979 53.177921 53.177921 0 0 0 32.332175 8.933891h308.431941a135.284631 135.284631 0 0 1 94.443988 35.735562z m-265.889604 375.22341a33.608446 33.608446 0 0 0-39.989797-20.420322h-82.957557V398.196271a37.011833 37.011833 0 0 0-42.542336-42.542336H467.987464a42.542337 42.542337 0 0 0-28.503366 13.188124 42.542337 42.542337 0 0 0-13.188124 28.503366v122.947353H336.10622a39.989796 39.989796 0 0 0-19.994898 5.10508 34.033869 34.033869 0 0 0-14.464395 15.315241 42.542337 42.542337 0 0 0-4.254234 20.845745 34.459293 34.459293 0 0 0 10.635585 19.994899l170.169346 178.677814a62.111812 62.111812 0 0 0 11.911855 8.93389 34.459293 34.459293 0 0 0 15.740664 4.679657 18.718628 18.718628 0 0 0 16.166088 0 55.730461 55.730461 0 0 0 11.911854-8.508467l170.169347-185.059165a37.437256 37.437256 0 0 0 8.083044-38.713526z"
                        fill="#3A9D80" p-id="24332"></path>
                </svg>
                <div style="width: 23px;"></div>
                <div style="width: 200px;height: 100%;overflow: hidden;">
                    <span style="font-size: 20px;font-weight: 700;">导入</span><br>
                    <span style="font-size: 13px;color: gray;">导入一个由本软件生成的项目，或通过饥荒打包工具生成的中间文件</span>
                </div>
            </div>
            <div onclick="decode()" class="w-100 row-start-center chaozuolist"
                style="height: 82px;min-height: 82px; border: 1px solid gainsboro;margin-bottom: 10px;">
                <div style="width: 10px;"></div>
                <svg t="1595863215240" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4516" width="35" height="35">
                    <path
                        d="M208.896 96.256h-102.4v102.4h51.2V455.68h102.4v-307.2c0-28.672-22.528-52.224-51.2-52.224z m405.504 0H409.6c-28.672 0-51.2 22.528-51.2 51.2V404.48c0 28.672 22.528 51.2 51.2 51.2h204.8c28.672 0 51.2-22.528 51.2-51.2v-256c0-28.672-22.528-52.224-51.2-52.224zM563.2 353.28H460.8v-153.6h102.4v153.6zM847.872 96.256h-102.4v102.4h51.2V455.68h102.4v-307.2c0-28.672-22.528-52.224-51.2-52.224z m-539.648 471.04H102.4c-28.672 0-51.2 22.528-51.2 51.2V875.52c0 28.672 22.528 51.2 51.2 51.2h205.824c28.672 0 51.2-22.528 51.2-51.2v-256c0-28.672-22.528-52.224-51.2-52.224z m-51.2 257.024H153.6v-153.6H256l1.024 153.6z m269.312-256h-102.4v102.4h51.2v257.024h102.4V619.52c1.024-28.672-22.528-51.2-51.2-51.2z m395.264 0H715.776c-28.672 0-51.2 22.528-51.2 51.2v257.024c0 28.672 22.528 51.2 51.2 51.2H921.6c28.672 0 51.2-22.528 51.2-51.2V619.52c0-28.672-23.552-51.2-51.2-51.2z m-51.2 256H768v-153.6h102.4v153.6z"
                        fill="#d4237a" p-id="4517"></path>
                </svg>
                <div style="width: 20px;"></div>
                <div style="width: 200px;height: 100%;overflow: hidden;">
                    <span style="font-size: 20px;font-weight: 700;">反编译</span><br>
                    <span style="font-size: 13px;color: gray;">反编译通过饥荒打包工具打包后可直接在游戏里播放的动画</span>
                </div>
            </div>
            <div onclick="decode2()" class="w-100 row-start-center chaozuolist"
                style="height: 82px;min-height: 82px; border: 1px solid gainsboro;margin-bottom: 10px;">
                <div style="width: 10px;"></div>
                <svg t="1595863215240" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4516" width="35" height="35">
                    <path
                        d="M208.896 96.256h-102.4v102.4h51.2V455.68h102.4v-307.2c0-28.672-22.528-52.224-51.2-52.224z m405.504 0H409.6c-28.672 0-51.2 22.528-51.2 51.2V404.48c0 28.672 22.528 51.2 51.2 51.2h204.8c28.672 0 51.2-22.528 51.2-51.2v-256c0-28.672-22.528-52.224-51.2-52.224zM563.2 353.28H460.8v-153.6h102.4v153.6zM847.872 96.256h-102.4v102.4h51.2V455.68h102.4v-307.2c0-28.672-22.528-52.224-51.2-52.224z m-539.648 471.04H102.4c-28.672 0-51.2 22.528-51.2 51.2V875.52c0 28.672 22.528 51.2 51.2 51.2h205.824c28.672 0 51.2-22.528 51.2-51.2v-256c0-28.672-22.528-52.224-51.2-52.224z m-51.2 257.024H153.6v-153.6H256l1.024 153.6z m269.312-256h-102.4v102.4h51.2v257.024h102.4V619.52c1.024-28.672-22.528-51.2-51.2-51.2z m395.264 0H715.776c-28.672 0-51.2 22.528-51.2 51.2v257.024c0 28.672 22.528 51.2 51.2 51.2H921.6c28.672 0 51.2-22.528 51.2-51.2V619.52c0-28.672-23.552-51.2-51.2-51.2z m-51.2 256H768v-153.6h102.4v153.6z"
                        fill="#000000" p-id="4517"></path>
                </svg>
                <div style="width: 20px;"></div>
                <div style="width: 200px;height: 100%;overflow: hidden;">
                    <span style="font-size: 20px;font-weight: 700;">通用反编译</span><br>
                    <span style="font-size: 13px;color: gray;">通用反编译方案，兼容性强，质量较差，仅当常规反编译失败时使用</span>
                </div>
            </div>
            <div>{{info}}</div>
        </div>
    </div>
    <script>
        var app = new Vue(
            {
                el: "#app",
                data: {
                    title: "张佳文",
                    projetlist: [],
                    info: ""
                },
                methods: {
                    openProjet: function (name) {
                        openProjet(name);
                    }
                }
            }
        );
    </script>
    <script>
        function setlist(list) {
            app.projetlist.push(list);
            //console.log(list);
        }
        function showinfo(info) {
            app.info = info;
        }
    </script>
    <script>
        CefSharp.BindObjectAsync("jsMethod");
        function reflushProjectList() {
            app.projetlist = [];
            jsMethod.reflushProjectList();
        }
        function openProjet(name) {
            jsMethod.openProjet(name);
        }
        function importproject() {
            jsMethod.importproject();
        }
        function newProject() {
            jsMethod.newProject();
        }
        function decode() {
            jsMethod.decode();
        }
        function decode2() {
            jsMethod.decode2();
        }
    </script>
</body>

</html>